/* 全局样式初始化 */
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  background-size: cover;
  overflow: hidden;
  color: #fff;
}

/* 上半部分容器布局 */
.upper-container {
  width: 80%;
  height: 80%;
  padding-left: 10%;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

/* 唱片容器样式 */
.record-container {
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}
.record-bg {
  background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(50,50,50,1) 100%);
  width: 450px;
  height: 450px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  position: relative;
}
.rotate-play {
  background-image: url('../img/record.jpg');
  background-size: 100% 100%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: relative;
  animation: rotate 20s linear infinite;
  animation-play-state: paused;
}
.rotate-play::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
}
.audio-playing .rotate-play {
  animation-play-state: running;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 唱片外圈装饰 */
.record-bg::before {
  content: '';
  position: absolute;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: linear-gradient(145deg, #333333, #000000);
  box-shadow:  20px 20px 60px #000000,
              -20px -20px 60px #333333;
  z-index: -1;
}

/* 歌曲信息容器样式 */
.introduction-container {
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}
.text-container {
  width: 80%;
  padding-left: 10%;
}
.music-title {
  font-size: 48px;
  color: white;
  margin-bottom: 20px;
  text-shadow: 20px 20px 60px #000000,
              -20px -20px 60px #333333;
}
.author-container {
  color: rgb(171, 171, 171);
  font-size: 24px;
  margin-bottom: 30px;
}

/* 歌词区域样式（可扩展） */
.lyrics-container {
  margin-top: 30px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.lyrics {
  position: absolute;
  width: 100%;
  transition: transform 0.3s ease-out;
}
.lyric-line {
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s;
}
.lyric-line.active {
  color: white;
  font-size: 18px;
}

/* 下半部分布局 */
.audio-box {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  position: relative;
  z-index: 10;
}
.audio-container {
  width: 90%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 进度条样式 */
.a-progress {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.pgs-total {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  position: relative;
}
.pgs-play {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(132,0,255,1) 100%);
  position: relative;
  width: 0%;
  transition: width 0.1s linear;
}
/* 进度条伪元素（绿色部分装饰） */
.pgs-play::after {
  content: '';
  position: absolute;
  right: -8px;
  top: -5px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: all 0.1s;
}
.pgs-total:hover .pgs-play::after {
  transform: scale(1.2);
}

/* 控制按钮通用样式 */
.center-icon, .button-icon {
  width: 36px;
  height: 36px;
  margin: 0 15px;
  cursor: pointer;
  transition: transform 0.2s;
  background-size: 100% 100%;
}
.center-icon:hover, .button-icon:hover {
  transform: scale(1.1);
}
.center-icon:active, .button-icon:active {
  transform: scale(0.9);
}

/* 播放/暂停按钮 */
.icon-play {
  background-image: url('../img/play.png');
  width: 60px;
  height: 60px;
}
.audio-playing .icon-play {
  background-image: url('../img/pause.png');
}

/* 播放时间样式 */
.time-container {
  width: 30%;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  float: left;
  display: flex;
  align-items: center;
  font-size: 16px;
}

/* 中间按钮容器样式 */
.center-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  float: left;
}
/* 播放模式按钮样式 */
.mode {
  background-image: url('../img/mode1.png');
}
/* 上一首、下一首按钮 */
.s-left {
  background-image: url('../img/prev.png');
}
.s-right {
  background-image: url('../img/next.png');
}
/* 音量按钮 */
.volumn {
  background-image: url('../img/volume.png');
}

/* 右下角按钮容器样式 */
.bottom-button-container {
  width: 30%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 列表、倍速、MV按钮样式 */
.list {
  background-image: url('../img/list.png');
}
.speed {
  background-image: url('../img/speed.png');
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
.MV {
  background-image: url('../img/mv.png');
}

/* 音量滑块样式 */
input[type="range"] {
  -webkit-appearance: none;
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  margin: 0 10px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.1s;
}
input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

/* 音乐列表样式 */
.music-list {
  width: 300px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0.95), rgba(0, 0, 0, 0.95));
  position: fixed;
  top: 0;
  right: -300px;
  transition: right 0.3s ease-out;
  z-index: 20;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}
.music-list.active {
  right: 0;
}
.music-list-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.music-list-title {
  color: white;
  font-size: 24px;
  font-weight: 300;
  padding: 20px 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
}
.line {
  height: 1px;
  width: 90%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 auto;
}
.all-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.all-list::-webkit-scrollbar {
  width: 5px;
}
.all-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
.all-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}
.all-list div {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  padding: 12px 25px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.all-list div:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.all-list div.active {
  color: #ff4d4f;
  background-color: rgba(255, 77, 79, 0.1);
}
.all-list div .music-duration {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* 遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 15;
  display: none;
  transition: opacity 0.3s;
}
.overlay.active {
  display: block;
}